<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      metal:use-macro="master.xhtml/master">
  <head>
    <metal:head fill-slot="head">
      <script tal:attributes="src string:${base}css-browser-selector.js" type="text/javascript"></script>
      <script tal:attributes="src string:${base}jquery.js" type="text/javascript"></script>
      <script tal:attributes="src string:${base}jquery.dragsort.js" type="text/javascript"></script>
      <script tal:attributes="src string:${base}jquery.watermark.js" type="text/javascript"></script>
      <script type="text/javascript">
      function onDragEnd(event) {
        $("#ruokapiiri-catalog tbody .ruokapiiri-position input").each(
          function(index, product) { product.value = index + 1 ; }
        ) ; 
        $("#ruokapiiri-catalog tbody").children("tr").each(
          function(index, row) {
            if (index % 2) { $(row).addClass("ruokapiiri-even") ; }
            else { $(row).removeClass("ruokapiiri-even") ; }
          }
        ) ; 
      }
      function switchProductDetails(event) {
        var details = $(event.target).parent().find(".ruokapiiri-details") ;
        if (details.is(":hidden")) { details.show() ; }
        else { details.hide() ; }
      }
      jQuery(function($) {
        $("#ruokapiiri-catalog tbody").dragsort({
          itemSelector: "tr",
          dragSelector: "tr",
          dragBetween: false,
          dragSelectorExclude: "input, select, option, textarea",
          dragEnd: onDragEnd
        }) ; 
        $("#ruokapiiri-catalog tbody").find(".ruokapiiri-details").hide() ;
        $("#ruokapiiri-catalog tbody").find(".ruokapiiri-description").click(switchProductDetails) ;
        $("#ruokapiiri-new-product").find(".ruokapiiri-details").hide() ;
        $("#ruokapiiri-new-product").find(".ruokapiiri-description").click(switchProductDetails) ;
        
        $(".ruokapiiri-description > input").watermark("Tuotenimike (tai tyhjä erotinrivi tilauslomakkeelle)") ;
        $(".ruokapiiri-producer > input").watermark("Tuottaja") ;
        $(".ruokapiiri-details > input").watermark("Huomautukset (luomu, gluteiiniton, ...)") ;
        $(".ruokapiiri-details > textarea").watermark("Tuoteseloste, jossa saa olla useita rivejä") ;
        $(".ruokapiiri-price > input").watermark("0,00") ;
      }) ;
      </script>
      <style type="text/css">
      .dragged td { background: #ddd ; }
      </style>
    </metal:head>
  </head>
  <body>
    <h2 metal:fill-slot="heading">Tuoteluettelo</h2>
    <p class="ruokapiiri-success" metal:fill-slot="message" tal:condition="MSG_CHANGES_SAVED|nothing">
      Muutokset tallennettu onnistuneesti.
    </p>
    <div metal:fill-slot="main" tal:omit-tag="">
      <p>
        Tällä sivulla näet kaikki tilausjärjestelmään syötetyt tuotteet.
      </p>
      <ul>
        <li>Lisää uusia tuotteita tuoteluettelon lopusta <em>yksi kerrallaan</em>.</li>
        <li>Valitse <em>kg</em> tuotteen yksiköksi vain, jos tuote punnitaan vasta jaossa.</li>
        <li>Järjestele tuotteita <em>raahaamalla</em> ne oikeaan kohtaan ja <em>tallentamalla muutokset</em>.</li>
        <li>Vain <em>tilattavissa</em> oleviksi merkityt tuotteet näytetään tilauslomakkeella.</li>
        <li>Tyhjä <em>tilattavissa</em> oleva tuoterivi lisää tyhjän rivin tilauslomakkeelle.</li>
        <li>Poista tuote valitsemalla tuotteen kohdalta poista ja tallentamalla muutokset.</li>
      </ul>
      <form id="ruokapiiri-catalog" method="post">
        <table>
          <thead>
            <tr>
              <th class="ruokapiiri-position">#</th>
              <th class="ruokapiiri-description">Tuotteen tiedot</th>
              <th class="ruokapiiri-price">Hinta</th>
              <th class="ruokapiiri-unit"></th>
              <th class="ruokapiiri-producer">Tuottaja</th>
              <th class="ruokapiiri-orderable">Tilattavissa</th>
              <th class="ruokapiiri-delete">Poista</th>
            </tr>
          </thead>
          <tbody>
            <tr tal:repeat="product products"
                tal:attributes="class php: repeat.product.odd ? 'ruokapiiri-even' : NULL">
              <td class="ruokapiiri-position">
                <input type="text"
                       tal:attributes="name string:${product/id}_position;
                                       value product/position" />
              </td>
              <td class="ruokapiiri-description">
                <input type="text"
                       tal:attributes="name string:${product/id}_description;
                                       value product/description" />
                <div class="ruokapiiri-details">
                  <input type="text"
                         tal:attributes="name string:${product/id}_notes;
                                        value product/notes" /><br/>
                  <textarea tal:attributes="name string:${product/id}_ingredients"
                            tal:content="product/ingredients">Ainesosat</textarea>
                </div>
              </td>
              <td class="ruokapiiri-price">
                 <input type="text"
                        tal:attributes="name string:${product/id}_price;
                                        value php: str_replace('.', ',', product.price)" />
                 &euro;
              </td>
              <td class="ruokapiiri-unit">&nbsp;/
                <select tal:attributes="name string:${product/id}_unit">
                  <option value="pcs"
                    tal:attributes="selected php: product.unit == 'pcs' ? 'true' : NULL">kpl</option>
                  <option value="kg"
                    tal:attributes="selected php: product.unit == 'kg' ? 'true' : NULL">kg</option>
                </select>
              </td>
              <td class="ruokapiiri-producer">
                <input type="text"
                       tal:attributes="name string:${product/id}_producer;
                                       value product/producer" />
              </td>
              <td class="ruokapiiri-orderable">
                <input type="checkbox"
                       tal:attributes="name string:${product/id}_orderable;
                                       checked php: product.orderable ? 'yes' : NULL" />
              </td>
              <td class="ruokapiiri-delete">
                <input type="checkbox"
                       tal:attributes="name string:${product/id}_delete;" />
              </td>
            </tr>
          </tbody>
          <tfoot id="ruokapiiri-new-product">
            <tr>
              <td class="ruokapiiri-position">Uusi</td>
              <td class="ruokapiiri-description">
                <input type="text" name="#_description" />
                <div class="ruokapiiri-details">
                  <input type="text" name="#_notes" /><br/>
                  <textarea name="#_ingredients" />
                </div>
              </td>
              <td class="ruokapiiri-price">
                <input type="text" name="#_price" /> &euro;
              </td>
              <td class="ruokapiiri-unit">&nbsp;/
                <select name="#_unit">
                  <option value="pcs" selected="true">kpl</option>
                  <option value="kg">kg</option>
                </select>
              </td>
              <td class="ruokapiiri-producer">
                <input type="text" name="#_producer" />
              </td>
              <td class="ruokapiiri-orderable">
                <input type="checkbox" name="#_orderable" />
              </td>
              <td/>
            </tr>
          </tfoot>
        </table>
        <input class="ruokapiiri-hidden" type="hidden" name="action" value="save" />
        <input class="ruokapiiri-submit" type="submit" value="Tallenna muutokset"/>
      </form>
    </div>
  </body>
</html>